<!-- Copyright 2021 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->
<style include="cr-shared-style">

#nav {
  margin: auto;
  text-align: start;
  width: 800px;
}

#navSeparator {
  background: rgb(232, 234, 237);
  height: 1px;
  width: 800px;
}

cr-button {
  font-family: 'Roboto';
  font-size: 16px;
  font-style: normal;
  font-weight: medium;
  line-height: 24px;
  margin-bottom: 40px;
  margin-inline-end: 8px;
  margin-inline-start: 8px;
  margin-top: 40px;
}

#lessonNav {
  display: inline-block;
  float: right;
}

#lessonNav cr-button {
  float: right;
}

#menuNav {
  display: inline-block;
  float: left;
}

#menuNav cr-button {
  float: right;
}

#exitTutorial {
  margin-inline-start: 0;
}

#nextLesson {
  margin-inline-end: 0;
}

</style>

<div id="nav">
  <div id="navSeparator" hidden$="[[
      shouldHideNavSeparator_(activeScreen) ]]"></div>
  <div id="navButtons">
    <div id="lessonNav">
      <cr-button id="nextLesson" class="action-button"
          on-click="onNextLessonButtonClicked_"
          hidden$="[[
        shouldHideNextLessonButton_(activeLessonIndex, activeScreen) ]]">
        [[ getMsg('tutorial_next_lesson_button') ]]
      </cr-button>
      <cr-button on-click="onPreviousLessonButtonClicked_"
          hidden$="[[
        shouldHidePreviousLessonButton_(activeLessonIndex, activeScreen) ]]">
        [[ getMsg('tutorial_previous_lesson_button') ]]
      </cr-button>
    </div>
    <div id="menuNav">
      <cr-button on-click="onRestartQuickOrientationButtonClicked_"
          hidden$="[[
        shouldHideRestartQuickOrientationButton_(activeLessonIndex,
            activeScreen)
          ]]">
        [[ getMsg('tutorial_restart_quick_orientation_button') ]]
      </cr-button>
      <cr-button on-click="onLessonMenuButtonClicked_"
          hidden$="[[ shouldHideLessonMenuButton_(activeScreen) ]]">
        [[ getMsg('tutorial_lesson_menu_button') ]]
      </cr-button>
      <cr-button on-click="onMainMenuButtonClicked_"
          hidden$="[[ shouldHideMainMenuButton_(activeScreen) ]]">
        [[ getMsg('tutorial_main_menu_button') ]]
      </cr-button>
      <cr-button id="exitTutorial" on-click="onExitButtonClicked_">
        [[ getMsg('tutorial_exit_button') ]]
      </cr-button>
    </div>
  </div>
</div>
